<template>
  <div class="pagination">
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="pagearr" :background="true"
      :layout="layout" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

</template>

<script setup>
const pageNum = defineModel('pageNum', { type: Number, default: 1 })
const pageSize = defineModel('pageSize', { type: Number, default: 10 })
const emit = defineEmits(['pagination'])
const props = defineProps({
  pagearr: {
    type: Array,
    default: () => [10, 20, 30, 40]
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  total: {
    type: Number,
    default: 0
  }
})
const handleSizeChange = (val) => {
  if (pageNum.value * val > props.total) { 
    pageNum.value = 1
  }
  emit('pagination')

}
const handleCurrentChange = (val) => {
  emit('pagination' )
  
  
}
</script>

<style lang="scss" scoped>
.pagination{
  margin-top: 20px;
  float: right;
  :deep(.el-select .el-input__wrapper
  ){
    border-radius: 10px;
  }
  :deep(.el-input__wrapper){
    border-radius: 10px;
  }
  :deep(.el-pagination.is-background .el-pager li){
    border-radius: 10px;
  }
  :deep(.el-pagination.is-background .btn-next:disabled){
    border-radius: 10px;
  }
  :deep(.el-pagination.is-background .btn-prev:disabled){
    border-radius: 10px;
  }
  :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active){
    border-radius: 10px;
  }
}
</style>